<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="a">
    <h2>事件</h2>
    <button oncontextmenu="return false"
            v-on:click="addCount($event, 5)">点击事件: {{count}}</button>
    <hr>
    <form @click="alert('表单点击')">
        用户名: <input><br>
        密码: <input><br>
        <span>{{result}}</span><br>
        <!-- form中的button 默认是提交按钮, 会触发提交动作
             所以当点击了button之后, 页面会立即刷新
             prevent 抑制该控件的默认行为
         -->
        <button @click.prevent="login">登录</button>
        <a href="不存在的页面.html" @click.prevent="result='打开注册页面'">去注册</a>
        <button @click.prevent.stop.ctrl="alert('按钮点击')">冒泡行为</button>
    </form>
</div>
<script>
var v = new Vue({
    el : "#a",
    data : {
        count : 0,
        result :  ""
    },
    // Vue 自定义内部函数
    methods : {
        addCount(e, num){
            // $event 是事件对象
            console.info(e);
            if (e.ctrlKey){
                this.count -= num;
            } else {
                this.count += num;
            }
        },
        login(){
            this.result = "登录成功!";
        }
    }
});
</script>



</body>
</html>